<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>

<body>
	<input type="file" id="upload"/>
	<!-- 全中文分手应该体面   起始点：28:08 - 49 -->
	<script>	
		// 限定只接受下面类型的文件
		const ACCEPT = '["image/jpg","image/png","image/jpeg"]';
		const MAXSIZE = 3 * 1024 * 1024;// 限定文件大小不可超过3M
		const MAXSIZE_STR = '3MB';// 超过3M的提示语
		const upload = document.getElementById('upload');// 获取DOM节点
		
		function uploadFile(compressImage){
			if( !compressImage ){
				console.log('调用上传函数时没有传入压缩后的图片文件！');
				return;
			}
			
			console.log('upload to server...',compressImage);
		}
		
		// Base64 压缩
		function convertImage2Base64(file,callback){
			let reader = new FileReader();
			reader.addEventListener('load',function(e){
				// 对象 reader 获取到的文件对象，也可以使用下面的方式获取文件
				// console.log(e.target.result);
				// console.log(reader.result);
				
				const base64Image = e.target.result;// 获取 base64 文件
				callback && callback(base64Image);// 没有设置则不会调用 callback 回调函数
				reader = null;// 清空对象
			});
			
			reader.readAsDataURL(file);
		}
		
		// 核心压缩逻辑
		function compress(base64Image,callback){// callback 用于上传压缩后的文件到服务器
			let maxWidth = 1024;// 要求图片的最大宽度是1024
			let maxHeight = 768;// 要求图片的最大高度
			const image = new Image();
			image.addEventListener('load',function(e){// 加载的监听事件
				let ratio = 1;// 默认压缩比率1 - 不用压缩
				let needCompress = false;// 默认不用压缩
				
				if( image.naturalWidth > maxWidth ){// 以宽度为准判断是否要压缩
					needCompress = true;
					ratio = image.naturalWidth / maxWidth;
					maxHeight = image.naturalHeight / ratio;
					
					console.log(`原始宽度=${image.naturalWidth},原始高度=${image.naturalHeight}`);
					console.log(`按照宽度计算的压缩比率是：${ratio}`);
					console.log(`压缩后的宽度=${image.naturalWidth/ratio}，压缩后的高度=${image.naturalHeight/ratio}`);
				}
				// 图片有可能宽度超标需要压缩，也有可能高度超标需要压缩，所有要做两套
				if( image.naturalHeight > maxHeight ){// 以高度为准判断是否要压缩
					needCompress = true;
					ratio = image.naturalHeight / maxHeight;
					maxWidth = image.naturalWidth / ratio;
					
					console.log(`原始宽度=${image.naturalWidth},原始高度=${image.naturalHeight}`);
					console.log(`按照宽度计算的压缩比率是：${ratio}`);
					console.log(`压缩后的宽度=${image.naturalWidth/ratio}，压缩后的高度=${image.naturalHeight/ratio}`);
				}
				
				if( !needCompress ){// 如果图片没有超标，使用图片原始尺寸
					maxWidth = image.naturalWidth;
					maxHeight = image.naturalHeight;
				}
				
				// 使用 canvas 压缩图片
				const can = document.createElement('canvas');
				can.setAttribute('id','__compress__');
				can.width = maxWidth;
				can.height = maxHeight;
				can.style.visibility = 'hidden';
				document.body.appendChild(can);
				
				const ctx = can.getContext('2d');
				ctx.clearRect(0,0,maxWidth,maxHeight);
				ctx.drawImage(image,0,0,maxWidth,maxHeight);
				
				const compressImage = can.toDataURL('image/jpeg',0.1);
				
				// 压缩后上传到服务器 - 调用回调函数
				callback && callback(compressImage);
				
				// 显示压缩后的图片
				const _image = new Image();
				_image.src = compressImage;
				document.body.append(_image);
				
				can.remove();
			})
			
			image.src = base64Image;
			document.body.appendChild(image);
		}
		
		upload.addEventListener('change',function(e){
			//const file = e.target.files[0];
			const [file]=e.target.files;// 等价于上面一行代码，获取用户选择的文件
			if(!file){// 检测是否接受到文件
				return;
			}
			
			const { type:fileType,size:fileSize } = file;
			console.log(`type=${fileType}`);
			console.log(`size=${fileSize}`);
			console.log(file);
			
			if(!ACCEPT.includes(fileType)){// 限定上传文件的格式
				alert(`不支持格式为 ${fileType} 的图片！`);
				upload.value = '';
				return;
			}
			
			if( fileSize > MAXSIZE ){// 限制上传文件的大小
				alert(`文件大小不可超过 ${MAXSIZE_STR}`);
				upload.value = '';
				return;
			}
			
			convertImage2Base64(file,(base64Image) => compress(base64Image,uploadFile));
		})
		
		
	</script>
</body>
</html>